<%@include file="/WEB-INF/jsp/common/taglibs.jsp"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<s:layout-render name="/WEB-INF/jsp/common/layout_main.jsp" title="${actionBean.resource.name}" description="${actionBean.resource.name}">
    <s:layout-component name="body">
        <s:messages/>
        <!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>-->
        <script src="http://code.jquery.com/ui/1.8.23/jquery-ui.min.js" type="text/javascript"></script>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.23/themes/base/jquery-ui.css" type="text/css" media="all">
        <script src='js/resource.jquery.rating.js' type="text/javascript" language="javascript"></script>
        <link href='css/resource.jquery.rating.css' type="text/css" rel="stylesheet"/>

        <script type="text/javascript" language="javascript">
            $(function(){ 
                
                $('#form1 :radio.star').rating('select',${actionBean.rating-1});
                if(${actionBean.rating}){
                    $('#form1 :radio.star').rating('readOnly');
                }
                $( "#tabs" ).tabs();
            });
        </script>
        <style type="text/css">
            /* CSS JGM for Create */
            #tabs {
                height:100%;
                overflow-y:auto;
            }
            #divborder {
                border:1px solid Silver;
                border-radius:81px;
                -moz-border-radius:81px; /* Firefox 3.6 and earlier */
                background-color:#F9F9F9;
                width:970px;
                height:1380px;
                margin-left: 20px;
            }
            #s-Label_1 {
                color: #003C4C;
                text-align:left;
                font-size: 16pt;
                font-style: normal;
                font-weight: bold;
                line-height: 24pt;
                margin-left:50px;

            }
            #s-Label_2 {
                color: #003C4C;
                font-size: 16pt;
                font-weight: bold;
            }
            .divborder1
            {
                border:1px solid #cccccc;
                border-radius:9px;
                -moz-border-radius:9px; /* Firefox 3.6 and earlier */
                background-color:#999;
                padding: 5px;
                /* margin-left: 10px;*/

            }
            .boxTitle1
            {
                color:#FFF; 
                background-color:#3b5998; 
                font-family:Tahoma; 
                font-size:11pt; 
                font-weight:bold; 
                line-height:11pt; 
                text-align:left; 
                border:1px solid #4462A0; 
                height:30px; 
                font-style:normal;
            }
            .boxMiddle
            {
                color:#333; 
                font-size:10px; 
                background-color:#F2F2F2; 
                font-family:Tahoma; 
                font-weight:bold; 
                line-height:11pt; 
                text-align:left; 
                border:1px solid #D8D8D8; 
                height:30px; 
                font-style:normal;
                text-align:left;
            }
            .boxtag
            {
                border-bottom:1px solid #A7A7A7; 
                cursor:pointer; 
                height: 60px; 
                background-color: white; 
                padding-top: 7px; 
                text-align:center;
            }
            .boxtagImg
            {
                margin-left:10px; 
                margin-right:10px;
            }
            .boxtagTitle
            {
                font-family:Tahoma; 
                font-weight:bold; 
                font-size:11pt; 
                color:#3960A0; 
                width: 241px; 
                margin-top:10px; 
            }
            .boxtagText
            {
                float:left; 
                position:relative; 
                font-family:Tahoma; 
                font-weight:bold; 
                font-size:8pt; 
                color:#999999; 
                text-align:justify; 
            }
            .boxfooter
            { 
                background-color:#F2F2F2; 
                border:1px solid #D8D8D8;
            }

            #my-div
            {
                width: 600px; 
                height: 356px;
                overflow : hidden;
                position : relative;
            }

            #my-iframe
            {
                top: -326px; 
                left: -181px;
                position : absolute;
                width    : 1280px;
                height   : 1200px;
            }
        </style>


        <div id="divborder"> <br/>
            <br/>
            <div align="center"><span id="s-Label_1">${actionBean.resource.name}</span></div>
            <br/>
            <table cellpadding="0" border="0" cellspacing="0" width="100%" style="font-family:Tahoma; color:#6E6D69; font-size:9px; margin-left:15px;">
                <tr>
                    <td><div>
                            <img border="0" alt="0" src="images/like.gif" /><span style="color:#3B5998;">${actionBean.resource.likesCounter} People</span> like this
                            &nbsp;&nbsp;<span style="color:#3B5998;">Rating: ${actionBean.resource.starRating} </span>
                        </div>
                        <!--<div><img border="0" alt="0" src="images/resource-img.png" /></div>-->
                        <div id="my-div">
                            <iframe src="${actionBean.resource.url_resource}" id="my-iframe" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
                        </div>
                        <br/>
                        <table border="0" width="600"><tr>
                                <td>
                                    <div style="width:70px; float:left;">
                                        <c:if test="${not actionBean.isLiked}">
                                            <s:link class="btnLike" beanclass="spatialmarketplace.cem.action.ResourceDetailActionBean" event="likeResource"><img border="0" alt="0" src="images/like-btn.png" />
                                                <s:param name="likesCounter" value="${actionBean.resource.likesCounter}"/>   
                                                <s:param name="resourceId" value="${actionBean.resource.resourceId}"/>
                                                <s:param name="userId" value="${actionBean.context.userId}"/>
                                            </s:link> 
                                        </c:if>
                                        <c:if test="${actionBean.isLiked}">
                                            You liked.!
                                        </c:if>                
                                    </div>     


                                    <script>
                                        var comscore_script = gawker_getScript('http://b.scorecardresearch.com/beacon.js');
                                        var comscore_beacon = { c1:2, c2:"6770184", c3:"", c4:"http://lifehacker.com/5843969/facebook-is-tracking-your-every-move-on-the-web-heres-how-to-stop-it", c5:"", c6:"", c15:"754d3b148df7a597947f5556cbe06628" };
                                    </script>
                                    <!-- End comScore Tag -->
                                    <script type="text/javascript">
                                        (function() {
                                            var tk = document.createElement('script');
                                            tk.src = 'http://fonts.gawker.com/zvc4iwz.js';
                                            tk.type = 'text/javascript';
                                            tk.async = 'true';
                                            tk.onload = tk.onreadystatechange = function() {
                                                var rs = this.readyState;
                                                if (rs && rs != 'complete' && rs != 'loaded') return;
                                                try { Typekit.load(); } catch (e) {}
                                            };
                                            var s = document.getElementsByTagName('script')[0];
                                            s.parentNode.insertBefore(tk, s);
                                        })();
                                    </script>

                                    <script type="text/javascript">
                                        var _gaq = _gaq || [];
                                        _gaq.push(['_setAccount', 'UA-142218-1']);
                                        _gaq.push(['_setDomainName', 'SharingResource']);
                                        _gaq.push(['_trackPageview']);
                                        _qoptions = { tags:"Gawker Geek" };
                                        _qacct="p-d4P3FpSypJrlA";
                                        gawker_getScript(('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js');
                                    </script>



                                    <script type="text/javascript">
                                        var quant_script = gawker_getScript("http://edge.quantserve.com/quant.js", function() {
                                            window.quantcastRun = 1;
                                        });
                                    </script>
                                    <div class="share_menu2" style="width: 422px;">
                                        <a href="http://www.facebook.com/sharer.php?u=http://localhost:8080/SpatialMarketplace/ResourceDetail.action" target="_blank" onclick="_gaq.push(['_trackEvent', 'share', 'facebook', 'http://localhost:8080/SpatialMarketplace/ResourceDetail.action']);window.open(this.href,'sharefb','toolbar=0,status=0,width=480,height=420');jQuery('.share_menu').hide();return false;"><span><img src="images/facebook-icon.png"></span></a> &nbsp;
                                        <a href="http://twitter.com/intent/tweet?url=http://localhost:8080/SpatialMarketplace/ResourceDetail.action&text=http://localhost:8080/SpatialMarketplace/ResourceDetail.action" target="_blank" onclick="_gaq.push(['_trackEvent', 'share', 'twitter', 'http://localhost:8080/SpatialMarketplace/ResourceDetail.action']);window.open(this.href,'sharetwitter','toolbar=0,status=0,width=480,height=360');jQuery('.share_menu').hide();return false;"><span><img src="images/twitter-icon.png"></span></a>

                                        <!-- Place this tag where you want the +1 button to render. -->
                                        <div class="g-plusone" data-annotation="inline" data-width="200"></div>

                                        <!-- Place this tag after the last +1 button tag. -->
                                        <script type="text/javascript">
                                            (function() {
                                                var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
                                                po.src = 'https://apis.google.com/js/plusone.js';
                                                var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
                                            })();
                                        </script>

                                        <%--
                                        <!-- AddThis Button BEGIN -->
                                        <div class="addthis_toolbox addthis_default_style">
                                            <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
                                            <a class="addthis_button_tweet"></a>
                                            <a class="addthis_button_google_plusone"></a>
                                        </div>
                                        <script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
                                        <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-504fcee854284a34"></script>
                                        <!-- AddThis Button END -->            
                                        --%>
                                </td><td width="200">

                                    <div id="form1" style="float:left;">
                                        <s:form beanclass="spatialmarketplace.cem.action.ResourceDetailActionBean">
                                            <s:radio class="star" name="star2" value="1"/>
                                            <s:radio class="star" name="star2" value="2"/>
                                            <s:radio class="star" name="star2" value="3"/>
                                            <s:radio class="star" name="star2" value="4"/>
                                            <s:radio class="star" name="star2" value="5"/>
                                            <s:param name="resourceId" value="${actionBean.context.groupOrResourceId}"/> 
                                            <c:if test="${actionBean.isRated}">
                                                <s:submit name="rateResource" value="Vote" size="2" style="width:50px" disabled="disabled"/>
                                            </c:if>
                                            <c:if test="${not actionBean.isRated}">
                                                <s:submit name="rateResource" value="Vote" size="2" style="width:50px"/>
                                            </c:if>
                                        </s:form>
                                    </div>
                                </td></tr></table>

                        <div style="width:135px; float:left;"></div>



                        <s:link  target="_blank" class="resource_sharing45" style="color: #404040; font-size: 12px;" beanclass="spatialmarketplace.cem.action.ResourceSharingActionBean" event="">
                            <img border="0" alt="0" src="images/Share-btn.png" />
                            <s:param name="resourceId" value="${actionBean.resource.resourceId}"/>
                        </s:link>
                        <script type="text/javascript">
                            $('.resource_sharing45').popupWindow({ 
                                centerScreen:1

                            }); 
                        </script>

                        <br/>
                        <div align="center" style="border-bottom:1px solid #999; width:600px; margin-top:15px;">&nbsp;</div>
                        <br/>
                        <div id="tabs" style="width:600px; height:350px;">
                            <ul>
                                <li><a href="#tabs-1">Layer Information</a></li>
                                <li><a href="#tabs-2">Download</a></li>
                                <li><a href="#tabs-3">Maps</a></li>
                                <li><a href="#tabs-4">Styles</a></li>
                            </ul>
                            <div id="tabs-1" style="font-size:11px; font-weight: normal">
                                ${actionBean.resource.layerInformationText}
                            </div>
                            <div id="tabs-2" style="font-size:11px; font-weight: normal">
                                ${actionBean.resource.downloadText}
                            </div>
                            <div id="tabs-3" style="font-size:11px; font-weight: normal">
                                ${actionBean.resource.mapsText}
                            </div>
                            <div id="tabs-4" style="font-size:11px; font-weight: normal">
                                ${actionBean.resource.stylesText}
                            </div>
                        </div>

                        <br/>
                        <div style="border-bottom:1px solid #999; border-top:1px solid #999; width:600px;"><img border="0" alt="0" src="images/comment-img.png" width="30px"/>&nbsp;<span style="color: #003C4C; font-size: 14pt; font-weight: bold;">Comments</span></div>
                        <iframe src="http://localhost:8080/SpatialMarketplace/Forum.action?groupOrResourceId=101&belongsToGroup=false" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:600px; height: 330px" ></iframe>  
                        <br/></td>
                <br/></td>
                <td valign="top">
                    <br/>
                    <div><a style="text-decoration: none;" href="javascript:history.back(1)"><span style="color: #003C4C; font-size: 14pt; font-weight: bold;">Go back to Dashboard</span></a></div>
                    <br/>

                    <div class="divborder1" style="width:300px; margin-left: -50px;" align="center">
                        <div class="boxTitle1"><div class="boxTitle2">Groups sharing this Resource</div></div>
                        <div class="boxMiddle"><div style="margin-top:8px; margin-left:10px;">List of groups</div></div>

                        <div  id="wrapgroup" style="height: 340px;">
                            <c:forEach var="grp" items="${actionBean.groupsSharing}" >
                                <div class="boxtag">
                                    <c:if test="${empty grp.logo}">
                                        <div><img class="boxtagImg"   alt="" align="left" border="0" width="68px" height="51px" src="images/advertising.jpg"></div>
                                        </c:if>
                                        <c:if test="${not empty grp.logo}">
                                        <div><img class="boxtagImg"   alt="" align="left" border="0" width="68px" height="51px" src="${grp.logo}"></div>
                                        </c:if>                  
                                    <div class="boxtagTitle" style="width: 500px;" align="left">${fn:substring(grp.name,0,30)} </div>
                                 <!--   <div class="boxtagText" style="width: 400px; height: 50px;">${fn:substring(grp.description,0,200)}...</div> -->

                                </div> 
                            </c:forEach>
                        </div><!-- End wrap  -->

                        <div class="boxfooter" style="height:10px;">
                        </div>
                    </div>
                    <!-- End My Group List-->
                    <br/>

                </td>
                </tr>
            </table>
        </div>

    </s:layout-component>
</s:layout-render>
